<html>
<head>
<link rel="stylesheet" type="text/css" href="/static/css/linetext.css">
<link rel="stylesheet" type="text/css"
	href="/static/css/jsonbeautify-base.min.css">

<%@include file="header.jsp"%>
<script src="/js/textarea.js"></script>

</head>
</html>
<body>

	<%@include file="headerbody.jsp"%>

	<div id="linedwrap" class="linedwrap">

		<textarea id="json_input" name="json_input" class="json_input"
			rows="30" cols="100" spellcheck="false"
			placeholder="Enter JSON to validate, or a URL to JSON to validate."></textarea>

		<!-- 		<textarea id="json_input" name="json_input" class="json_input"
			rows="30" cols="100" spellcheck="false"
			placeholder="Enter JSON to validate, or a URL to JSON to validate."
			wrap="off" style="resize: both; width: 889px; max-width: 883px;"></textarea> -->
	</div>
	<div class="validateButtons clear">
		<div class="left">
			<button name="validate" id="validate" value="Validate" class="button">Validate</button>
		</div>
	</div>
	<div id="results_header" class="hide">
		<h3>Result</h3>
		<pre id="results"></pre>
	</div>

	<script>

    $('#json_input').keyup(function () {
            $('#linedwrap').removeClass('greenBorder').removeClass('redBorder');
        }).linedtextarea({
            selectedClass: 'lineselect'
        }).focus();


$("#validate").click(function () {

    var content = $("#json_input").val();
    if(content.length>0)
    {
    var url = "/data/jsonBeautifyServlet";

    $.ajax({
        type: "post",
        url: url,
        contentType: "application/json",
        data: {
            'action': 'beautify',
            'content': content
        },
        timeout: 100000,
        beforeSend: function (XMLHttpRequest) {},
        success: function (data) {
            var dataJson = jQuery.parseJSON(data);
            var htmlReplace = "";
            var textAreaContent = "";
            var status = dataJson[0];
            if (status=="Valid JSON") {
                for (var i = 1; i < dataJson.length; i++) {
                   textAreaContent += dataJson[i] + "\n";
                }
                $("#json_input").val(textAreaContent);
                $("#codelines").linedtextarea(); 
                $('#linedwrap').addClass('greenBorder');
                $("#results").removeClass();
                $("#results").addClass("success");
                               
                console.log(dataJson);
            } 
            else
            {
                $("#results").removeClass();
                $('#linedwrap').addClass('redBorder');
                $("#results").addClass("error");
         }
            $("#results").html(status);
            
          	$("#results_header").removeClass("hide");
            
        },
        complete: function (XMLHttpRequest, textStatus) {},
        error: function (xhr, ajaxOptions, thrownError) {
            console.log("error:" + xhr.status + "," + thrownError);
        }
    });
    }
    

});
</script>
</body>

